<template>
	<view>
		<view class="tab">
			<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
				<view v-for="(item,index) in tabList" :key="item.id" class="nav-item" :class="{current: index === tabCurrentIndex}"
				 :id="'tab'+index" @click="changeTab(index)">{{item.name}}</view>
			</scroll-view>
		</view>
		<view>
			<map :latitude="lat" :longitude="lng" :scale="scale" :markers="markers" @regionchange="changeRegion" id="mapSearch" @labeltap="clickLabel"></map>
		</view>
	</view>
</template>

<script>
	export default{
		name:'mapSearch',
		data(){
			return{
				lat:27.992827,
				lng:120.649701,
				scale:12,
				tabCurrentIndex:0,
				tabList:[
					{id:1,name:'二手房'},
					{id:2,name:'租房'},
					{id:3,name:'新房'}
				],
				houseType:2,
				markers:[],
				size:1,
				oldHouseList:[],
				newHosueList:[],
				flag1:true,//控制缩放时只调用一次接口
				flag2:true,
				flag3:true,
			}
		},
		methods:{
			// 百度地图转腾讯地图 
			bMapToTxMap(bd_lat,bd_lng){
				var point = new Object();
				var x_pi = 3.14159265358979324 * 3000.0 / 180.0; 
				var x = bd_lng - 0.0065;
				var y = bd_lat - 0.006;
				var z = Math.sqrt(x*x+y*y)- 0.00002 * Math.sin(y * x_pi); 
				var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi); 
				var Mars_lng = z * Math.cos(theta);
				var Mars_lat = z * Math.sin(theta);
				point.longitude = Mars_lng;
				point.latitude = Mars_lat;
				return point;
			},
			// 点击选项卡
			changeTab(index) {
				this.tabCurrentIndex = index
				this.flag1 = true
				this.flag2 = true 
				this.flag3 = true
				if(this.tabCurrentIndex == 0){
					this.houseType = 2
					if(this.scale < 13 &&this.flag1){
						this.markers = []
						this.searchHouse()
					}else if(this.scale == 13 &&this.flag2){
						this.markers = []
						this.searchxyProvince()
					}else if(this.scale >=14 &&this.flag3){
						this.markers = []						
						this.searchxyHouse()
					}
				}else if(this.tabCurrentIndex == 1){
					this.houseType = 1
					if(this.scale < 13 && this.flag1){
						this.markers = []						
						this.searchHouse()
					}else if(this.scale == 13 &&this.flag2){
						this.markers = []						
						this.searchxyProvince()
					}else if(this.scale >=14 &&this.flag3){
						this.markers = []						
						this.searchxyHouse()
					}
				}else if(this.tabCurrentIndex == 2){
					this.houseType = 3
					if(this.scale < 13 &&this.flag1){
						this.markers = []						
						this.searchNewHouse()
					}else if(this.scale == 13 &&this.flag2){
						this.markers = []						
						this.searchNewxyProvince()
					}else if(this.scale >=14 &&this.flag3){
						this.markers = []						
						this.searchNewxyHouse()
					}
				}
			},
			// 点击房源
			clickLabel(e){
				let id = e.markerId
				if(this.houseType !=3){
					uni.navigateTo({
						url:'../xiaoqu/areaHouse?areaId='+id+'&houseType='+this.houseType
					})
				}else{
					uni.navigateTo({
						url:'../newHouse/newHouse?houseId='+id+'&houseType='+this.houseType
					})
				}
			},
			// 缩放等级变化
			changeRegion(e){
				console.log(e);
				this.mapCtx = uni.createMapContext('mapSearch')
				if(e.causedBy == 'scale'){
					this.mapCtx.getScale({
						success: (res) => {
							console.log(res);
							if(this.houseType != 3){
								if(res.scale < 13 &&this.flag1){
									this.markers = []
									this.scale = res.scale
									this.searchHouse()
								}else if(res.scale == 13 &&this.flag2){
									this.markers = []
									this.scale = res.scale 
									this.searchxyProvince()
								}else if(res.scale >=14 &&this.flag3){
									this.markers = []
									this.scale = res.scale
									this.oldHouseList.forEach(item =>{
										this.searchxyHouse(item.latitude,item.longitude)
									})
								}
							}else{
								if(res.scale < 13 &&this.flag1){
									this.markers = []
									this.scale = res.scale
									this.searchNewHouse()
								}else if(res.scale == 13 &&this.flag2){
									this.markers = []
									this.scale = res.scale 
									this.searchNewxyProvince()
								}else if(res.scale >=14 &&this.flag3){
									this.markers = []
									this.scale = res.scale
									this.newHosueList.forEach(item =>{
										this.searchNewxyHouse(item.latitude,item.longitude)
									})
								}
							}
						}
					})
				}
			},
			// 地图找旧房县级
			async searchHouse(){
				let res = await this.$fetch(this.$api.jiufang,{houseType:this.houseType},'GET')
				this.flag1 = false
				this.flag2 = true
				this.flag3 = true
				let mapInfo = res.data
				mapInfo.forEach(item =>{
					var p = new Object();
					p = this.bMapToTxMap(item.latitude,item.longitude)
					item.latitude = p.latitude;
					item.longitude = p.longitude
				})
				for(var i in mapInfo){
					this.markers.push({
						id:i+1,latitude:mapInfo[i]['latitude'],longitude:mapInfo[i]['longitude'],alpha:1,width:5,height:5,iconPath:'../../static/icon/5.png',
						label:{
							content:mapInfo[i]['dictValue']+'\n'+mapInfo[i]['count'],fontSize:14,anchorX:-80,anchorY:-80,
							bgColor:'#874A9880',padding:50,textAlign:'center',color:'#FFFFFF',borderRadius:500
						}
					})
				}
				
			},
			// 地图找旧房区域
			async searchxyProvince(){
				let res = await this.$fetch(this.$api.jiufangProvince,{houseType:this.houseType},'GET')
				this.flag1 = true
				this.flag2 = false
				this.flag3 = true
				this.oldHouseList = JSON.parse(JSON.stringify(res.data))
				let mapInfo = res.data
				mapInfo.forEach(item =>{
					var p = new Object();
					p = this.bMapToTxMap(item.latitude,item.longitude)
					item.latitude = p.latitude;
					item.longitude = p.longitude
				})
				for(var i in mapInfo){
					if(mapInfo[i]['dictValue'] != '下吕浦'){
						this.markers.push({
							id:i+1,latitude:mapInfo[i]['latitude'],longitude:mapInfo[i]['longitude'],alpha:1,width:5,height:5,iconPath:'../../static/icon/5.png',
							label:{
								content:mapInfo[i]['dictValue']+'\n'+mapInfo[i]['count'],fontSize:14,anchorX:-60,anchorY:-60,
								bgColor:'#874A9880',padding:30,textAlign:'center',color:'#FFFFFF',borderRadius:500
							}
						})
					}
				}
				for(var i in mapInfo){
					if(mapInfo[i]['dictValue'] == '下吕浦'){
						this.markers.push({
							id:i+1,latitude:mapInfo[i]['latitude'],longitude:mapInfo[i]['longitude'],alpha:1,width:5,height:5,iconPath:'../../static/icon/5.png',
							label:{
								content:mapInfo[i]['dictValue']+'\n'+mapInfo[i]['count'],fontSize:14,anchorX:-60,anchorY:-60,
								bgColor:'#FE9E2E',padding:30,textAlign:'center',color:'#FFFFFF',borderRadius:500
							}
						})
					}
				}
			},
			// 地图找旧房 小区
			async searchxyHouse(lat,lng){
				let res = await this.$fetch(this.$api.jiufangHouse,{lat:lat,lng:lng,size:this.size,houseType:this.houseType},'GET')
				this.flag1 = true
				this.flag2 = true
				this.flag3 = false
				let mapInfo = res.data
				mapInfo.forEach(item =>{
					var p = new Object();
					p = this.bMapToTxMap(item.latitude,item.longitude)
					item.latitude = p.latitude;
					item.longitude = p.longitude
				})
				for(var i in mapInfo){
					this.markers.push({
						id:mapInfo[i]['areaId'],latitude:mapInfo[i]['latitude'],longitude:mapInfo[i]['longitude'],alpha:1,width:5,height:5,iconPath:'../../static/icon/5.png',
						label:{
							content:mapInfo[i]['areaName']+'|'+mapInfo[i]['count']+'套',fontSize:14,anchorX:-40,anchorY:-40,
							bgColor:'#874A98',padding:5,textAlign:'center',color:'#FFFFFF',borderRadius:20
						}
					})
				}
			},
			// 地图找新房 县级
			async searchNewHouse(){
				let res = await this.$fetch(this.$api.xinfang,{},'GET')
				this.flag1 = false
				this.flag2 = true
				this.flag3 = true
				let mapInfo = res.data
				mapInfo.forEach(item =>{
					var p = new Object();
					p = this.bMapToTxMap(item.latitude,item.longitude)
					item.latitude = p.latitude;
					item.longitude = p.longitude
				})
				for(var i in mapInfo){
					this.markers.push({
						id:i+1,latitude:mapInfo[i]['latitude'],longitude:mapInfo[i]['longitude'],alpha:1,width:5,height:5,iconPath:'../../static/icon/5.png',
						label:{
							content:mapInfo[i]['dictValue']+'\n'+mapInfo[i]['count'],fontSize:14,anchorX:-80,anchorY:-80,
							bgColor:'#874A9880',padding:50,textAlign:'center',color:'#FFFFFF',borderRadius:500
						}
					})
				}
			},
			// 地图找新房 区域
			async searchNewxyProvince(){
				let res = await this.$fetch(this.$api.xinfangProvince,{},'GET')
				this.flag1 = true
				this.flag2 = false
				this.flag3 = true
				this.newHosueList = JSON.parse(JSON.stringify(res.data))
				let mapInfo = res.data
				mapInfo.forEach(item =>{
					var p = new Object();
					p = this.bMapToTxMap(item.latitude,item.longitude)
					item.latitude = p.latitude;
					item.longitude = p.longitude
				})
				for(var i in mapInfo){
					if(mapInfo[i]['dictValue'] != '下吕浦'){
						this.markers.push({
							id:i+1,latitude:mapInfo[i]['latitude'],longitude:mapInfo[i]['longitude'],alpha:1,width:5,height:5,iconPath:'../../static/icon/5.png',
							label:{
								content:mapInfo[i]['dictValue']+'\n'+mapInfo[i]['count'],fontSize:14,anchorX:-60,anchorY:-60,
								bgColor:'#874A9880',padding:30,textAlign:'center',color:'#FFFFFF',borderRadius:500
							}
						})
					}
				}
				for(var i in mapInfo){
					if(mapInfo[i]['dictValue'] == '下吕浦'){
						this.markers.push({
							id:i+1,latitude:mapInfo[i]['latitude'],longitude:mapInfo[i]['longitude'],alpha:1,width:5,height:5,iconPath:'../../static/icon/5.png',
							label:{
								content:mapInfo[i]['dictValue']+'\n'+mapInfo[i]['count'],fontSize:14,anchorX:-60,anchorY:-60,
								bgColor:'#FE9E2E',padding:30,textAlign:'center',color:'#FFFFFF',borderRadius:500
							}
						})
					}
				}
			},
			// 地图找新房 楼盘
			async searchNewxyHouse(lat,lng){
				let res = await this.$fetch(this.$api.xinfangHouse,{lat:lat,lng:lng,size:this.size},'GET')
				this.flag1 = true
				this.flag2 = true
				this.flag3 = false
				let mapInfo = res.data
				mapInfo.forEach(item =>{
					var p = new Object();
					p = this.bMapToTxMap(item.latitude,item.longitude)
					item.latitude = p.latitude;
					item.longitude = p.longitude
				})
				for(var i in mapInfo){
					this.markers.push({
						id:mapInfo[i]['areaId'],latitude:mapInfo[i]['latitude'],longitude:mapInfo[i]['longitude'],alpha:1,width:5,height:5,iconPath:'../../static/icon/5.png',
						label:{
							content:mapInfo[i]['areaName']+'|'+mapInfo[i]['count']+'套',fontSize:14,anchorX:-40,anchorY:-40,
							bgColor:'#874A98',padding:5,textAlign:'center',color:'#FFFFFF',borderRadius:20
						}
					})
				}
			}
		},
		onLoad() {
			this.searchHouse()
		}
	}
</script>

<style lang="scss">
	map{
		width: 750rpx;
		height: 100vh;
	}
	.tab{
		width: 100%;
		height: 90rpx;
		background: #FFFFFF;
		position: relative;
		z-index: 10;
	}
	.nav-bar{
		position: relative;
		z-index: 10;
		height: 90upx;
		white-space: nowrap;
		background-color: #fff;
		
		.nav-item {
			display: inline-block;
			width: 250upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			font-size: 28upx;
			color: #A6A6A6;
			position: relative;
		
			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 6upx solid #874A98;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}
		
		.current {
			color: #874A98;
			font-size: 32upx;
			font-weight: bold;
		
			&:after {
				width: 50%;
			}
		}
	}
</style>
